<template>
	<view >
		<!--故障单基本信息-->
		<repair-info :detail="detail.wechatRepair" v-if="detail.wechatRepair" :repairDetail="repairDetail" :detailType="3" :id="id" ref="repairRef">
			<view slot="repairDetail" v-if="!repairDetail.state">
				<!-- 处理结果 -->
				<view class="py-2 pl-20 position-relative line-h">
					<view class="position-absolute font-md" style="left:20upx;">
						<text class="text-danger">*</text>处理结果：
					</view>
					<view class="d-flex">
					  <view class="mr-1" @click="selectRadio(1)"><text class="iconfont text-danger" :class="formData.result===1?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>已修复</view>
					  <view  @click="selectRadio(0)"><text class="iconfont text-danger" :class="formData.result===0?'icon-danxuankuangxuanzhong':'icon-danxuankuang1'"></text>未修复</view>
					</view>
				</view>
				<!-- 开始时间 -->
				<view class="py-2 pl-20 position-relative line-h">
					<view class="position-absolute font-md" style="top:40upx;left:20upx;">
						<text class="text-danger">*</text>开始时间：
					</view>
					<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
					 :class="focusClass.startTime ? 'input-border-color' : ''"
					placeholder-class="text-light-muted"  disabled
					 @focus="focus('startTime')" @blur="blur('startTime')"
					 style="width:508upx"
					@click="onShowDatePicker('startTime')" placeholder="请选择开始时间"
					:value="formData.startTime"/>
					<mx-date-picker :show="showPicker.startTime" type="datetime" :value="formData.startTime" :show-tips="false"  :show-seconds="true" @cancel="cancel($event,'startTime')"  @confirm="onSelected($event,'startTime')" format="yyyy-mm-dd hh:ii:ss"/>
				</view>
				<!-- 结束时间 -->
				<view class="py-2 pl-20 position-relative line-h">
					<view class="position-absolute font-md" style="top:40upx;left:20upx;">
						<text class="text-danger">*</text>结束时间：
					</view>
					<input class="border p-2 w-100 d-block line-h border-box input-defind rounded"
					 :class="focusClass.endTime ? 'input-border-color' : ''"
					placeholder-class="text-light-muted"  disabled
					 @focus="focus('endTime')" @blur="blur('endTime')"
					 style="width:508upx"
					@click="onShowDatePicker('endTime')" placeholder="请选择结束时间"
					:value="formData.endTime"/>
					<mx-date-picker :show="showPicker.endTime" type="datetime" :value="formData.endTime" :show-tips="false"  :show-seconds="true" @cancel="cancel($event,'endTime')" @confirm="onSelected($event,'endTime')" format="yyyy-mm-dd hh:ii:ss"/>
				</view>
				<!-- 备注 -->
				<view class="py-2 pl-20 position-relative line-h">
					<view class="position-absolute font-md" style="top:40upx;left:20upx;">备注：</view>
					 <textarea class="border p-2  d-block rounded font-md" 
					 placeholder-class="text-light-muted" placeholder="请输入备注"
					 :class="focusClass.remark ? 'input-border-color' : ''"
					 @input="inputEvent($event,'remark')"
					  @focus="focus('remark')" @blur="blur($event,'remark')" auto-height
					  :value="formData.remark" style="width:468upx"/>
				</view>
				<!-- 图片上传 -->
				<view class="p-2 position-relative line-h">
					<view class="font-md"> 图片上传：</view>
					<image-upload :imageList="imageList"></image-upload>
				</view>
				
				<view class="main-bg-color text-white rounded mt-4 font-md text-center py-2" hover-class="main-bg-hover-color" @click="submit">
					提交
				</view>
			</view>
		</repair-info>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import repairInfo from "@/components/repairInfo/repairInfo.vue"
	import mxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue"
	import imageUpload from "@/components/imageUpload/imageUpload.vue"
	export default {
		components:{
			repairInfo,
			mxDatePicker,
			imageUpload
		},
		data() {
			return {
				type:'',
				showStartTime: false,
				showPicker:{
					startTime:false,
					endTime:false
				},
				imageList:[],
				showEndTime:false,
				themeColor: '#ec4d49',
				id:-1,
				detail:{},
				jyRepair: false,
				startYear: new Date().getFullYear() -2,
				endYear: new Date().getFullYear()+2,
				repairPersonnel:[],
				repairDetail:{},
				formData:{
					remark: '',
				    result: 1,
				    startTime: '',
				    endTime: '',
				},
				focusClass:{
					dealerName:false,
					dealRemark:false,
					startTime:false,
					endTime:false
				},
				wechatRepairShow: false,/**是否展示报修单处理详情 */
				dealRepair:false,
				addComponents: false,/**是否展示换上的零件或备件列表 */
				uninstallMaterial: false,/**是否展示换上的零件或备件列表 */
				pickerValue:[0],
				
			}
		},
		onLoad(e){
			this.type = e.type
			this.id = e.id;	
		},
		onShow(){
			this.getSendRepairDetail();
			setTimeout(()=>{
				this.$refs.repairRef.init();
			},600)
			
		},
		methods: {
			showDetail(type){
				let self = this;
				switch(type){
					
				}
			},
			focus(e,key){
				this.focusClass[key] = true
			},
			blur(e,key){
				this.focusClass[key] = false
			},
			inputEvent(e,key){
				switch(key){
					case 'dealRemark':
					this.formData.dealRemark=e.detail.value
					break;
				}
			},
			 /**获取维修单详情*/ 
			getSendRepairDetail(){
				  let self = this;
				  self.$H.get((this.type==="send"?api.sendRepairDetail:api.selfRepairDetail)+self.id).then(res=>{
					  self.detail= res.content;
					  self.dealRepair = res.content.state === 0 ? true : false;
					  if(res.content.wechatRepair.dealResult===1){
						  self.repairDetail=res.content
					  }
					  if(res.content.wechatRepair.dealResult===2){
						  self.repairDetail=res.content
					  }
				  })
			 },
			
			selectRadio(value){
				this.formData.result = value;
			},
			onSelected(e,type){
				this.formData[type]= e.value;
				this.showPicker[type]=false;
			},
			cancel(e,type){
				this.showPicker[type]=false;
			},
			onShowDatePicker(type){
				this.showPicker[type] = true;
			},
			submit(){
				let self = this;
				if(self.formData.startTime===''){
					uni.showToast({
						title:'开始时间不能为空'
					})
					return
				}
				if(self.formData.endTime===''){
					uni.showToast({
						title:'结束时间不能为空'
					})
					return
				}
				uni.showLoading({
					title:'数据提交中'
				})
				let postData={
					id:self.id,
					startTime: self.formData.startTime,
					endTime: self.formData.endTime,
					result: self.formData.result,
					remark: self.formData.remark
				}
				if(self.imageList.length>0){
					self.imageList.forEach((item, index) => {
						postData['picture' + (index + 1)] = item.path;
					})
				}
				self.$H.post((this.type==='send'?api.updateSendRepair:api.updateSelfRepair),postData).then(res=>{
					uni.showToast({
						title:'提交成功',
						icon:'success'
					})
					self.getSendRepairDetail();
				})
			}
		}
	}
</script>

<style scoped>
.item-type{
  font-size: 28upx;
  top:90upx;
  left:0;
  width:140upx;
  height:56upx;
  line-height: 56upx;
  text-align: center;
  background: #c9bebd;
  color:#f9f8f8;
}
.item-level{
	  top:90rpx;
	  right:0;
	  width:80rpx;
	  height:56rpx;
	  line-height: 56rpx;
	  text-align: center;
	  color:#fff;
	  border-bottom-left-radius: 30rpx;
}
.image-item{
  width:200upx;
  height:200upx;
  line-height: 200upx;
  text-align: center;
}
</style>
